<template>
  <div class="chart-content-wrapper" @mouseenter="mouseenter()" @mouseleave="mouseleave()">
    <!-- 头部筛选和标题 -->
    <top-filter :title="reportName" ref="topFilter" :isShowHelp="this.isShowHelp" :helpContent="this.helpMessage">
      <double-check-filter :isParentLinkChild="true"
                           @confirmDoubleSelect="planAreaSelect"
                           defaultText="统筹区"
                           :filter="filterN"
                           type="planArea"
                           :pageChange="pageChange">
      </double-check-filter>

      <single-list-filter-without-cb :defaultText="'养老保险'"
                                     :filter="filterN"
                                     :type="'socialInsurance'"
                                     @confirmSingleSelect="confirmSingleSelect"
                                     :leftTipText="'险种'"
                                     v-if="insuranceCode == 1000">
      </single-list-filter-without-cb>

      <single-list-filter-without-cb :defaultText="'全部人员'"
                                     :filter="filterN"
                                     :type="'workStatus'"
                                     @confirmSingleSelect="workStatusConfirmSingleSelect"
                                     :pageChange="pageChange">
      </single-list-filter-without-cb>
    </top-filter>
    <!-- 图标和结论 -->
    <div class="chart-container" v-show="isShowChart">
      <div id="social-insurance-base-analysis" class="chart-type1">
      </div>
      <Summarize :showSummarizeText="conclusion"></Summarize>
    </div>
  </div>
</template>

<script>

  import TopFilter from '../../last/filter/top-filter1'
  import DoubleCheckFilter from '../../last/filter/double-check-filter.vue'
  import SingleListFilterWithoutCb from '../../last/filter/single-list-filter-without-checkbox'
  import Summarize from '../../last/summarize/summarize.vue'
  import {setChartHeight, loadingOpt, isJanuary} from '../../../assets/js/utils.js'

  import {getByJiaoFeiJiShuJiaoFeiAnalysis} from '../../../api/api'

  export default {
    components: {
      TopFilter,
      DoubleCheckFilter,
      SingleListFilterWithoutCb,
      Summarize
    },
    props: ['isChange', 'filter', 'insuranceCode', 'insuranceText', 'pageChange'],
    data () {
      return {
        reportName: '基于缴费基数的缴费水平分析',
        filterN: JSON.parse(JSON.stringify(this.filter)),
        isShowChart: true,
        conclusion: '',
        areaObj: {'areaCode': '', 'areaName': ''},
        insuredObj: {'insuredCode': '', 'insuredName': ''},
        workStatusObj: {'workStatusCode': '', 'workStatusName': '',},
        callBackParams: {},
        isShowHelp: false,
        helpMessage: ''
      }
    },
    mounted () {
      this.initAreaObj();
      this.initInsuredObj();
      this.initWorkStatusObj();
      setChartHeight();

      setTimeout(() => {
        this.initMyChart();
        this.getData();
      }, 100);

    },
    activated () {
      if (!this.myChart) {
        this.initAreaObj();
        this.initInsuredObj();
        this.initWorkStatusObj();
        setChartHeight();
        this.initMyChart();

      }
      this.getData();
    },
    watch: {
      isChange () {
        setTimeout(() => {
          setChartHeight();
          setTimeout(() => {
            if (this.myChart) {
              this.myChart.resize();
            }
          }, 10);
        }, 101);
      },
      insuranceCode (val) {},
      pageChange(){
        let val = this.$route.params.id;
        let temtInsuredCode= 1001;
        if (val == 1000) {
          temtInsuredCode = 1001;
        } else {
          temtInsuredCode = val;
        }

        this.initAreaObj();
        this.insuredObj.insuredCode = temtInsuredCode;
        this.insuredObj.insuredName = this.insuranceText;
        this.initWorkStatusObj();

        this.initMyChart();
        this.getData();
      }
    },
    methods: {
      initAreaObj () {
        let areaCode = [];
        let areaName = [];
        this.filter.nc.planArea.map((item, index) => {
          if (index > 0 && index <= 6) {
            areaCode.push(item.selectId);
            areaName.push(item.selectName);
          }
        });
        this.areaObj.areaCode = areaCode.join(',');
        this.areaObj.areaName = areaName.join('、');
      },
      initInsuredObj () {
        if (this.filter.nc.insuranceTypes.length > 0) {
          let item = this.filter.nc.insuranceTypes[0];
          this.insuredObj.insuredCode = item.selectId;
          this.insuredObj.insuredName = item.selectName;
        }
      },
      initWorkStatusObj () {
        if (this.filter.nc.workStatus.length > 0) {
          let item = this.filter.nc.workStatus[0];
          this.workStatusObj.workStatusCode = item.selectId;
          this.workStatusObj.workStatusName = item.selectName;
        }
      },
      initMyChart () {
        this.myChart = this.$echarts.init(document.getElementById('social-insurance-base-analysis'));
      },
      // 统筹区选择
      planAreaSelect (selectedIdArr, selectedNameArr) {
        this.areaObj.areaCode = selectedIdArr.join(',');
        this.areaObj.areaName = selectedNameArr.join('、');
        this.getData();
      },
      // 险种点击
      confirmSingleSelect (selectedId, selectedName) {
        this.insuredObj.insuredCode = selectedId;
        this.insuredObj.insuredName = selectedName;
        this.getData();
      },
      workStatusConfirmSingleSelect (selectedId, selectedName) {
        this.workStatusObj.workStatusCode = selectedId;
        this.workStatusObj.workStatusName = selectedName;
        this.getData();
      },
      getData () {
        this.myChart.clear();
        // 给echart 加loading效果
        this.myChart.showLoading(loadingOpt);

        getByJiaoFeiJiShuJiaoFeiAnalysis('PensionFundMonitor/ByJiaoFeiJiShuJiaoFeiAnalysis', this.areaObj.areaCode,
          this.insuredObj.insuredCode, this.workStatusObj.workStatusCode)
          .then(response => {
            if (response.code === 0) {
              let json = response.data;
              this.isShowChart = true;
              this.myChart.hideLoading();

              this.reportName = json.reportName;
              this.conclusion = json.reportConclusion;
              this.helpMessage = json.tip;
              this.isShowHelp = this.helpMessage && this.helpMessage.length > 0;

              this.callBackParams = json;
              this.drawLine(json)
            } else {
              this.isShowChart = false;
            }
          })
          .catch(res => {
            this.isShowChart = false;
          })
      },
      drawLine (json) {
        let boundaryNum = isJanuary();

        let option = {
          grid: [//此参数可在一个dom中划分多个图表 可设置不同图表的位置
            {
              top: '10%',
              height: '14%',
              left: '60px',
              right: '60px',
              tooltip: {
                formatter: "{b}</br>{c}%" //给当前坐标系添加弹窗
              }
            },
            {
              top: '35%',
              height: '53%',
              left: '60px',
              right: '60px',
              id: 'two',
              tooltip: {
                show: true,
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                },
              }
            }
          ],
          legend: [
            {
              data: ['平均值增长率'],
              itemWidth: 10,
              itemHeight: 10,
              icon: 'circle',
              selectedMode: false,
              textStyle: {
                color: '#fff'
              },
            },
            {
              top: '95%',
              left: 'center',
              icon: 'rect',
              itemWidth: 10,
              itemHeight: 10,
              selectedMode: false,
              itemGap: 20,
              data: ['最小值',
                '中位数',
                '众数',
                '最大值',
                {name: '平均值', icon: 'circle',}
              ],
              textStyle: {
                color: '#fff'
              },
            },
          ],
          tooltip: {
            show: true,
            textStyle: {
              fontSize: 12
            },
            formatter: function (params) {
              return `<span style="color: #fff">缴费基数</span></br>
                      <span style="color: #fff">年份: ${params[0].name}</span></br>
                      <span style="color: #fff">最小值: ${params[0].data}元</span></br>
                      <span style="color: #fff">平均值: ${params[4].data}元</span></br>
                      <span style="color: #fff">中位数: ${params[1].data}元</span></br>
                      <span style="color: #fff">众数: ${params[2].data}元</span></br>
                      <span style="color: #fff">最大值: ${params[3].data}元</span></br>`;
            }
          },
          xAxis: [
            {
              data: json.yearList,
              show: true,
              axisLine: {
                show: true, // 显示x轴坐标线并设置为虚线
                lineStyle: {
                  color: '#294363'
                }
              },
              axisTick: {
                show: false // 不显示x轴坐标的刻度
              },
              axisLabel: {
                show: false // 不显示x轴坐标数值
              }
            },
            {
              data: json.yearList,
              gridIndex: 1,
              axisLine: { // x轴的横线是否显示
                show: true,
                lineStyle: {
                  color: '#2a4565'
                }
              },
              axisTick: { // x轴的刻度短竖线是否显示
                show: false
              },
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#fff'
                }
              },
            }
          ],
          yAxis: [
            {
              splitLine: {
                show: false,
              },
              position: 'right',
              splitNumber: 2,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#fff'
                }
              },
            },
            {
              name: '单位 : 元',
              nameTextStyle: {
                color: '#fff',
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#2a4565',
                  type: 'dashed',
                }
              },
              gridIndex: 1,
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#2a4565',
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#fff'
                }
              },
            }
          ],
          series: [ // 折线
            {
              type: 'line',
              showSymbol: true,
              name: '平均值增长率',
              symbol: 'circle',
              data: json.avgRatio,
              color: '#129cff',
              symbolSize: 10,
              tooltip: {
                show: true,
                formatter: function (params) {
                  return `<span style="color: #fff"}">平均值增长率</span></br>
                          <span style="color: #fff"">年份: ${params.name}</span></br>
                          <span style="color: #fff"'>增长率: ${params.value}%</span>`
                }
              },
              label: {
                show: true,
                position: 'top',
                formatter: '{c}%',
                color: '#fff'
              },
              xAxisIndex: 0,
              yAxisIndex: 0,
            },
            {
              name: '最小值',
              color: '#ff6a93',
              type: 'bar',
              data: json.minimumList,
              xAxisIndex: 1,
              yAxisIndex: 1,
            },
            {
              name: '中位数',
              color: '#ffd66a',
              type: 'bar',
              data: json.medianList,
              xAxisIndex: 1,
              yAxisIndex: 1,
            },
            {
              name: '众数',
              color: '#55cdb7',
              type: 'bar',
              data: json.modeList,
              xAxisIndex: 1,
              yAxisIndex: 1,
            },
            {
              name: '最大值',
              color: '#0298df',
              type: 'bar',
              data: json.maximumList,
              xAxisIndex: 1,
              yAxisIndex: 1,
            },
            {
              symbol: 'circle',
              name: '平均值',
              color: '#9de5f3',
              type: 'line',
              data: json.avgList,
              xAxisIndex: 1,
              yAxisIndex: 1,
            }
          ],
        };

        this.myChart.setOption(option);
      },
      mouseenter () {
        this.$refs.topFilter._hideChartTitle()
      },
      mouseleave () {
        this.$refs.topFilter._showChartTitle()
      },
    }
  }
</script>

<style scoped>


</style>
